/* eslint-disable react-hooks/exhaustive-deps */
/*
 * @Author: 周海 zhouhaib@yonyou.com
 * @Date: 2022-12-16 21:46:00
 * @LastEditors: zhouhai zhouhaib@yonyou.com
 * @LastEditTime: 2025-04-10 15:28:58
 */
import { addLogininfor, delLogininfor, updateLogininfor } from '@/api/monitor/logininfor';
import BillCard from '@/components/BillCard';
import { useStore } from '@/store';
import { SysLogininforDomain } from '@/type.d/monitor/logininfor';
import { Button, Col, Form, Input, Modal, Row, Select, Space } from 'antd';
import React, { useEffect, useState } from 'react';


interface SysLogininforCardProp {
    sysCommonStatusOptions: any[];
    /**
     * 卡片数据 受控
     */
    cardData: SysLogininforDomain;
    /**
     * 卡片新增时的默认数据
     */
    newdata?: SysLogininforDomain;
    /**
     * 列表数据
     */
    tableListDataSource: SysLogininforDomain[];
    /**
     * 更新列表数据
     */
    setTableListDataSource: (data: SysLogininforDomain[]) => void;

    setIsedit?: (isedit: boolean) => void;

    isedit?: boolean;
    /**
     * 跳转到列表状态
     */
    onBack?: (e?: React.MouseEvent<HTMLElement>) => void;
}
const SysLogininforCard: React.FC<SysLogininforCardProp> = ((props: SysLogininforCardProp) => {
    const {
        cardData,
        newdata = {},
        tableListDataSource,
        setTableListDataSource,
        setIsedit,
        isedit = false,
        onBack
    } = props;
    const { layoutStore } = useStore();
    const [selectdata, setSelectdata] = useState<SysLogininforDomain>(cardData);
    const [oldSelectdata, setOldSelectdata] = useState<SysLogininforDomain>({});//编辑状态临时保存选中的菜单树数据
    const [formRef] = Form.useForm<SysLogininforDomain>();

    const intCardData = (_cardData: SysLogininforDomain) => {
        setSelectdata(_cardData)
        setOldSelectdata({})
    }


    const addCardData = (_cardData: SysLogininforDomain) => {
        setSelectdata(_cardData)
        setOldSelectdata({ ...selectdata })
        setIsedit?.(true)
    }

    const editCardData = () => {
        setOldSelectdata({ ...selectdata })
        setIsedit?.(true)
    }

    const resetCardData = () => {
        setSelectdata({ ...oldSelectdata })
        setOldSelectdata({})
    }

    const onDelete = (dedata: SysLogininforDomain) => {
        if (dedata.infoId) {
            layoutStore.OpenSpanning()
            delLogininfor(dedata.infoId).then(() => {
                setSelectdata({})
                setOldSelectdata({})
                setTableListDataSource(tableListDataSource.filter((item) => {
                    return item.infoId !== dedata.infoId
                }))
            }).finally(() => {
                layoutStore.CloseSpanning()
            })
        }

    }

    useEffect(() => {//从列表跳转到卡片，如果数据发生了变化，更新数据
        intCardData(cardData)
    }, [])


    useEffect(() => {
        formRef.resetFields()
        if (selectdata) {
            formRef?.setFieldsValue({ ...selectdata });
        } else {
            formRef?.setFieldsValue({});
        }
    }, [selectdata])


    /**
     * 表单字段配置
     */
    const cardItems: JSX.Element =
        <Row>
            <Col md={8} xl={6} hidden>
                <Form.Item
                    name="infoId"
                    label="访问ID"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="userName"
                    label="用户账号"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="ipaddr"
                    label="登录IP地址"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="loginLocation"
                    label="登录地点"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="browser"
                    label="浏览器类型"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="os"
                    label="操作系统"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="status"
                    label="登录状态"
                >
                    <Select options={props.sysCommonStatusOptions} />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="msg"
                    label="提示消息"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="loginTime"
                    label="访问时间"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} hidden>
                <Form.Item
                    name="createBy"
                    label="创建者"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} hidden>
                <Form.Item
                    name="createTime"
                    label="创建时间"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="updateBy"
                    label="更新者"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={8} xl={6} >
                <Form.Item
                    name="updateTime"
                    label="更新时间"
                >
                    <Input />
                </Form.Item>
            </Col>
            <Col md={24} xl={24} >
                <Form.Item
                    name="remark"
                    label="备注"
                >
                    <Input.TextArea />
                </Form.Item>
            </Col>
        </Row>
        ;


    const cardbuttons = (
        <Space>
            <Button
                size='small'
                key="add"
                type="primary"
                onClick={() => {
                    addCardData({ ...newdata })
                }}
            >
                新增
            </Button>
            <Button
                size='small'
                key="edit"
                type="primary"
                disabled={selectdata?.infoId ? false : true}
                onClick={() => {
                    editCardData()
                }}
            >
                修改
            </Button>
            <Button
                size='small'
                key="delete"
                type="primary"
                disabled={selectdata?.infoId ? false : true}
                onClick={() => {
                    Modal.confirm({
                        okText: '确定',
                        cancelText: '取消',
                        title: '系统提示',
                        content: '确定要删除数据吗？',
                        type: 'warning',
                        onOk: () => {
                            onDelete(selectdata)
                        }
                    }
                    )

                }}
            >
                删除
            </Button>
        </Space>
    )

    const onSave = () => {
        formRef.validateFields().then(() => {
            const data: SysLogininforDomain = formRef.getFieldsValue?.() || {};
            if (!selectdata.infoId) {//新增
                layoutStore.OpenSpanning()
                addLogininfor({ ...selectdata, ...data }).then((res) => {
                    intCardData(res.data)//更新卡片数据
                    tableListDataSource.push(res.data)
                    setTableListDataSource([...tableListDataSource])
                    setIsedit?.(false)
                }).finally(() => {
                    layoutStore.CloseSpanning()
                })
            } else {//更新
                layoutStore.OpenSpanning()
                updateLogininfor({ ...selectdata, ...data }).then((res) => {
                    intCardData(res.data)//更新卡片数据
                    setTableListDataSource(tableListDataSource.map((item) => {
                        if (item.infoId === res.data.infoId) {
                            return res.data
                        } else {
                            return item
                        }
                    }))
                    setIsedit?.(false)
                }).finally(() => {
                    layoutStore.CloseSpanning()
                })
            }
        })
    }


    const editbuttions = (
        <Space>
            <Button
                size='small'
                key="save"
                type="primary"
                onClick={() => {
                    onSave()
                }}
            >
                保存
            </Button>
            <Button
                size='small'
                key="cancel"
                type="primary"
                onClick={() => {
                    resetCardData()
                    setIsedit?.(false)
                }}
            >
                取消
            </Button>
        </Space>
    )

    return (
        <BillCard
            formid='infoId'
            key={'SysLogininforCard'}
            formRef={formRef}
            isedit={isedit}
            extraButton={isedit ? editbuttions : cardbuttons}
            onBack={onBack}
            title={'系统访问记录'}
            cardItem={cardItems}
        />
    )
})
export default SysLogininforCard;